<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>

<body>
<h1>用户登录</h1>
用户名：<input name="userName" type="text" id="userName"><br>
密码：<input name="password" type="password" id="password"><br>
<input type="button" value="登录" onclick="login()">

<script src="js/jquery-3.7.1.min.js"></script>
<script>
    function login() {
        // 这里使用的是 jquery 封装过的 ajax（更简洁），不是原生的
        // 语法：$.ajax({}); ajax 的参数是一个对象，写在 {} 里，主要内容就是完成接口文档信息
        $.ajax({
            type: "post", // 请求类型
            url: "/user/login", // 访问路径
            // 传参 key: value
            data: {
                "userName": $("#userName").val(), // 用 # 获取 id
                "password": $("#password").val()
            },
            // 返回结果
            success: function(body) { // 此处的 body 变量就是后端返回的 true 或 false
                if (body==true) {
                    // 跳转到 index 页面
                    location.href = "index.html";
                } else {
                    // 当前页面
                    alert("密码错误");
                }
            }
        });
    }

</script>
</body>

</html>